<template>
  <view>
    <view class="vip-card">
      <u-avatar src="https://picsum.photos/id/91/200/200" size="100"></u-avatar>
      <view class="flex-col justify-between u-p-24" style="width: 400rpx;height: 140rpx;">
        <view class="flex-row align-center">
          <view class="name u-font-30 u-line-1">189****6672</view>
          <view class="vip u-m-l-24">VIP</view>
        </view>
        <view class="date u-font-24 u-line-1">2020年12月30日到期</view>
      </view>
      <my-btn :size="[130, 64, 30]" color="#553836" bg="#ffe5b9" inline round>续费</my-btn>
    </view>
    
    <view class="u-p-24 slogo">
      <view class="item">省钱</view>
      <view class="dot">•</view>
      <view class="item">专享</view>
      <view class="dot">•</view>
      <view class="item">省力</view>
      <view class="dot">•</view>
      <view class="item">服务</view>
    </view>
    
    <view class="u-p-t-24 u-p-b-24">
      <quanyi></quanyi>
    </view>
    
    <view class="hy-title">年卡甄选</view>
    <hy-swiper></hy-swiper>
    
    
    <view class="u-p-24 chongzhi">
      <view class="flex-row justify-between align-center">
        <view class="b-title">选择VIP类型</view>
        <view class="b-line"></view>
      </view>

      <view class="btns">
        <view class="btn">
          <view class="title">月卡VIP</view>
          <view class="price">￥19.9/月</view>
          <view class="through">￥30</view>
        </view>
        <view class="btn">
          <view class="title">季卡VIP</view>
          <view class="price">￥19.9/月</view>
          <view class="through">￥30</view>
        </view>
        <view class="btn on">
          <view class="title">年卡VIP</view>
          <view class="price">￥19.9/月</view>
          <view class="through">￥30</view>
        </view>
      </view>
      <my-btn :size="[650, 90, 36]" color="#2B2F38" bg="url('../../static/images/vpbtn.png') center / cover no-repeat"
        round>立即开通</my-btn>
      <u-gap height="40"></u-gap>
    </view>
    
    <view class="bg-btm">
      <u-gap height="16"></u-gap>
      
      <view class="hy-title">专享商品</view>
      <view class="u-p-24 flex-row justify-between flex-wrap">
        <good v-for="i in 4" :key="i" @click="$goto('/pages/shop/good')"></good>
      </view>
      
      <view class="hy-title">会员返佣</view>
      <view class="u-p-24 flex-row justify-between flex-wrap">
        <fanyong v-for="i in 4" :key="i" @click="$goto('/pages/shop/good')"></fanyong>
      </view>
      
      <view class="hy-title">专享门店</view>
      <view class="u-p-24">
        <shop v-for="i in 4" :key="i"></shop>
      </view>
    </view>
  </view>
</template>

<script>
  import good from './components/good.vue'
  import fanyong from './components/good-fanyong.vue'
  import shop from './components/shop.vue'
  import quanyi from './components/quanyi.vue'
  import hySwiper from './components/swiper.vue'
  export default {
    components: {
      quanyi,
      good,
      fanyong,
      shop,
      hySwiper
    },
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  page {
    background: #1f2228;
  }
  
  .hy-title {
    font-size: 32rpx;
    width: 300rpx;
    height: 60rpx;
    color: #FFE6B5;
    font-weight: bold;
    background: url(../../static/icons/hy-vip.png) center / cover no-repeat;
    margin: 24rpx auto;
    text-align: center;
    padding-top: 16rpx;
    letter-spacing: 2rpx;
  }

  .vip-card {
    width: 720rpx;
    height: 220rpx;
    margin: 24rpx auto;
    padding-left: 48rpx;
    background: url(../../static/images/vipbg.png) center/ cover no-repeat;
    display: flex;
    align-items: center;
    color: #FFD9B2;

    .vip {
      width: 64rpx;
      height: 36rpx;
      background: linear-gradient(90deg, #FFD8B2 0%, #FFE9BC 100%);
      border-radius: 18rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #4D3030;
      font-size: 20rpx;
    }
  }
  
  .slogo {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: #FFE1B7;
    
    .dot {
      margin: 0 24rpx;
    }
  }

  .chongzhi {
    
    .b-title {
      color: #967658;
      font-size: 30rpx;
      font-weight: bold;
    }

    .b-line {
      width: 500rpx;
      height: 2px;
      background: #5A4A3D;
    }

    .btns {
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;
      padding: 24rpx 0 40rpx 0;
      
      .title {
        color: var(--title);
        font-size: 24rpx;
        padding: 8rpx 20rpx;
      }
      
      .price {
        width: 100%;
        height: 60rpx;
        padding-top: 8rpx;
        font-size: 32rpx;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--price);
      }
      
      .through {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: line-through;
        color: var(--through);
      }

      .btn {
        width: 230rpx;
        height: 176rpx;
        position: relative;
        background: url(../../static/images/vp.png) center / cover;
        
        --title: #FFE6B5;
        --price: #967658;
        --through: #D0A57C;
      }

      .btn.on {
        background: url(../../static/images/vpon.png) center / cover;
        
        --title: #D0A57C;
        --price: #2B2F38;
        --through: #967658;
      }
    }
  }

  .bg-btm {
    background: #2b2f38;
  }
</style>
